import { View, Text } from "@tarojs/components";
import { AtAvatar, AtList, AtListItem, AtMessage } from "taro-ui";
import Taro, { useDidShow } from "@tarojs/taro";
import { useState } from "react";

import { getTaskcountApi } from "../../utils/api";

import "./index.scss";

const Index = () => {
  const avatarUrl = Taro.getStorageSync("avatarUrl");
  const nickName = Taro.getStorageSync("nickName");

  const [task, set_task] = useState({});

  useDidShow(() => {
    getData();
  });

  const getData = async () => {
    const res = await getTaskcountApi({});
    if (res.res === 0) {
      set_task(res);
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  const gotomonitor = value => {
    Taro.reLaunch({
      url: "/pages/monitor/index?tabs=" + value
    });
  };

  return (
    <View className="mine-wrap">
      <AtAvatar image={avatarUrl} size="large"></AtAvatar>

      <Text className="name">{nickName}</Text>

      <View className="task">
        <View className="at-article__h2">当前任务</View>
        <AtList className="first">
          <AtListItem
            title="探测"
            arrow="right"
            extraText={task.detect_count}
            onClick={() => gotomonitor(0)}
          />
          <AtListItem
            title="检查"
            arrow="right"
            extraText={task.inspect_count}
            onClick={() => gotomonitor(1)}
          />
        </AtList>

        <View className="at-article__h2">已完成任务</View>
        <AtList>
          <AtListItem
            title="探测"
            arrow="right"
            extraText={task.detect_over_count}
          />
          <AtListItem
            title="检查"
            arrow="right"
            extraText={task.inspect_over_count}
          />
        </AtList>
      </View>
      <AtMessage />
    </View>
  );
};

export default Index;
